<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Uploadify单图上传</title>
<link href="__PUBLIC__/Static/uploadify/uploadify.css" rel="stylesheet">
<script src="__PUBLIC__/Static/jquery.min.js"></script>
<script src="__PUBLIC__/Static/uploadify/jquery.uploadify.min.js"></script>

<script>
	$(function(){
		$("#upload").uploadify({
			'width'         : 120,//按钮宽
			'height'        : 30,//按钮高
			'buttonText'	  : '选择文件',//按钮名称
			'swf'           : '__PUBLIC__/Static/Uploadify/uploadify.swf',//flash地址
            //下面是后端相关
            "multi"         : false,//是否多图上传
			'auto'		    : true,//是否自动上传
            'fileObjName'   : 'Filedata',
			'uploader'      : '{:U("Uploadify/upload")}',//处理上传的控制器
            'fileTypeExts'	  : '*.jpg; *.png; *.gif;',
			'removeCompleted': true,//上传成功之后是否移除队列
            'removeTimeout' : 1,
			'onInit': function (){},		
            'onFallback'   : function() {
                alert('未检测到兼容版本的Flash.');
            },
            'onDialogClose': function(queueData){ 
                    //主要是吧cancle图标的路径改一下。
                    $('.uploadify-queue-item .cancel a').css({
                        'background-image':'url("__PUBLIC__/Static/uploadify/uploadify-cancel.png")',
                        'background-position':'center',
                        'background-repeat':'no-repeat'
                    });
               
            },
            'onUploadStart': function(){},
			'onUploadSuccess':  function(file, data, response) {
/* result of file :
creationdate Date {Mon Sep 15 2014 14:51:53 GMT+0800}
filestatus -4
id "SWFUpload_0_0"
index 0
modificationdate Date {Mon Jan 20 2014 15:52:16 GMT+0800} 
name "IMG_0519.JPG"
post Object {}
size 118272 
type ".JPG" 
*/
//console.log(file);
//console.log(data);// {"file":""}
//console.log(response);//true 

				var result = $.parseJSON(data);
				//错误处理 巧妙的运用拦截手法，用拦截代替分支
				if(result.status == 0){ 
					alert(result.info);
					return false;
				}
				//上传成功
                    //设置隐藏域的值
                $('#hidden').val(result.data.path);
				var id = Math.random().toString();
				id = id.replace('.','_'); //生成唯一标示 用于高级功能的识别例如 移除等
				var html = '<li class="imageitem" id="'+id+'">';
					html+= '<img height="160" width="160" src="__ROOT__'+result.data.path+'" />';
                    html+=  '<em><textarea style=" height:20px;width:155px;">'+file.name+'</textarea></em>'; //file.name = data.name
					html+=  '</li>';
                //为了清空缓存 1 追加之前清空队列 （利用事件） 2 单图可以采用替换
				//$('#image_result').append(html);
				$('#image_result').html(html);
			}
			
		});
	})
</script>
</head>

<body>
        <div class="data_grid" style=" width:95%;float:left;padding:10px 20px 20px">
                <div class="even">
                    <input type="file"  id="upload">
                    <input type="hidden" name="file" id="hidden" value="">
                </div>
                <div class="upload-img-box">
                    <ul class="imagelist" id="image_result"></ul>
                </div>
        </div>
<style>
.imagelist{}
.imagelist li{
    background: none repeat scroll 0 0 #F0F0F0;
    border: 1px solid #E0E0E0;
    display: inline;
    float: left;
	margin-right:10px;
	margin-top:5px;
    padding: 11px;
    width: 160px;
	height:220px;
	overflow:hidden;
	position: relative;
	
}
.imagelist li em{
    color: #999999;
    display: block;
    line-height: 18px;
    padding: 8px 0px;
}

.imagelist li span.txt {
    color: #FFFFFF;
    display: block;
    left: 11px;
    line-height:25px;
	height:25px;
    bottom: 41px;
    width: 160px;
	opacity: 0.7;
}
.imagelist li span a.actbut{float:left;width:24px; height:24px; margin-top:3px;}
</style>

</body>
</html>
